<!DOCTYPE html>
<html class="x-admin-sm">
    
    <head>
        <meta charset="UTF-8">
        <title>DS_SaoDiSheng</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8" />
        <link rel="stylesheet" href="css/font.css">
        <link rel="stylesheet" href="css/xadmin.css">
        <script src="lib/layui/layui.all.js" charset="utf-8"></script>
        <script src="js/jquery.min.js"></script>
        <script src="js/vue/2.5.16/vue.min.js"></script>
        <script src="js/axios/0.17.1/axios.min.js"></script>
        <script type="text/javascript" src="js/xadmin.js"></script>
    </head>
    
    <body>
        <div class="x-nav">
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div>
        <div class="layui-fluid" id="workingArea">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <form>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <input placeholder="起始时间(yyyy-MM-dd)" name="start" id="start" v-model="param.startTime">
                                </div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <input placeholder="截止时间(yyyy-MM-dd)" name="end" id="end" v-model="param.endTime">
                                </div>

                                <div class="layui-input-inline layui-show-xs-block">
                                    <label><span class="x-red"> </span> 寄件人:</label>
                                    <select class="form-control" v-model="param.sid">
                                        <option  :value="-1">选择寄件人</option>>
                                        <option v-for="user in users" :value="user.id">
                                            寄件人：{{user.name}}
                                        </option>
                                    </select>
                                </div>

                                <div class="layui-input-inline layui-show-xs-block">
                                    <label ><span class="x-red"> </span> 运输物流:</label>
                                    <select class="form-control" v-model="param.vid">
                                        <option  :value="-1">选择运输物流</option>>
                                        <option v-for="vehicle in vehicles" :value="vehicle.id">
                                            运输物流：{{vehicle.name}}
                                        </option>
                                    </select>
                                </div>

                                <div class="layui-input-inline layui-show-xs-block">
                                    <a href="#nowhere"  @click="list()" class="btn btn-success">查询</a>
                                </div>
                            </form>

                            <div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <label ><span class="x-red"> </span> 总费用:</label>
                                    <input  readonly v-model="total">
                                </div>
                            </div>
                        </div>

                        <div class="layui-card-body ">
                            <table class="layui-table layui-form">
                                <thead>
                                <tr>
                                    <th>订单编号</th>
                                    <th>寄件人信息</th>
                                    <th>收件人信息</th>
                                    <th>下单时间</th>
                                    <th>配送时间</th>
                                    <th>配送方式</th>
                                    <th>配送人员</th>
                                    <th>包裹</th>
                                    <th>订单费用</th>
                                </tr>
                                </thead>
                                <tbody>
                                <!--这里的beans就是ViewModel层定义的数据-->
                                <template v-for="bean in beans ">
                                    <tr>
                                        <td>{{bean.id}}</td>
                                        <td>{{bean.sender.name}} : {{bean.sender.address}}</td>
                                        <td>{{bean.consignee.name}} : {{bean.consignee.address}}</td>
                                        <td>{{bean.createDate}}</td>
                                        <td>{{bean.deliveryDate}}</td>
                                        <td>{{bean.vehicle.name}}</td>
                                        <td>{{bean.staff.name}}</td>
                                        <td>{{bean.pg.name}}</td>
                                        <td>{{bean.freight}}</td>
                                    </tr>
                                </template>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        //判断是否为空
        function checkEmpty(value,text){

            if(null==value || value.length==0){
                alert(text+ "不能为空");
                return false;
            }
            return true;
        }
        //确实是否要删除
        function checkDeleteLink(){
            var confirmDelete = confirm("确认要删除");
            if(confirmDelete)
                return true;
            return false;
        }

        <!--前后端交互层-->
        $(function () {
            var data4Vue = {
                uri: 'forestatistics',
                users: [],       // 用户，用于查询
                vehicles: [],       // 运输工具，用于查询
                beans: [],      // 订单记录，用于遍历
                total: 0,       // 统计金额
                param:{sid: -1,        // 查询指标，寄件人编号
                    vid: -1,        // 查询指标，运输工具编号
                    startTime: "",  // 查询指标，订单起始时间
                    endTime: "",    // 查询指标，订单截止时间
                    }
            };

            // ViewModel
            var vue = new Vue({
                el: "#workingArea",      // 关联作用域
                data: data4Vue,
                mounted:function () {// mounted表示这个Vue对象加载成功
                    this.list();       // 初始化显示的数据（全部数据）
                    this.load();        // 加载用于查询的数据
                },
                // 定义方法
                methods: {
                    list: function () {
                        var url = this.uri;
                        console.log(this.startTime);
                        axios.post(url, this.param).then(function (response) {
                            var resutl = response.data;
                            vue.total = resutl.data.total;
                            vue.beans = resutl.data.beans;      // 将分页的内容转成对象实例
                        });
                    },
                    load: function () {
                        var url = this.uri;
                        axios.get(url).then(function (response) {
                            var result = response.data;
                            vue.users = result.data.users;
                            vue.vehicles = result.data.vehicles;
                        });
                    },
                },
            });
        });
    </script>

</html>